<%@ page contentType="text/html;charset=UTF-8" language="java"
	pageEncoding="utf-8"%>
<%@ include file="../include/head.jsp"%>
<%@ include file="../include/top.jsp"%>
<%@ include file="../include/left.jsp"%>
<div class="main-content">

	<%@ include file="../include/navigate.jsp" %>
	
	<div class="container">
		<div class="widget-box">
			<div class="widget-box-header">
				<div class="col-sm-2">
					<div class="title">
						<i class="icon-edit">&nbsp;</i>修改用户
					</div>
				</div>
			</div>
			<div class="widget-box-content" style="padding: 15px;">
				<c:if test="${not empty message}">
					<div class="alert alert-danger" role="alert">${message}</div>
				</c:if>
				<c:if test="${error != null }">
                    <div id="loginError" class="alert alert-danger alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        <strong>异常</strong> ${error}
                    </div>
                </c:if>
				<div id="saveStatus"></div>
				<form class="form-horizontal" role="form"
					action="${pageContext.request.contextPath}/user/edit" method="post">
					<input type="hidden" name="id" value="${user.id}" />
					<div class="form-group">
						<label class="col-sm-2 control-label">用户名称:</label>

						<div class="col-sm-5">
							<input type="text" name="username" class="input-mask-username"  style="width:100%;"
								data-toggle="tooltip" data-placement="left"
								value="${user.username}" required>
						</div>
						
						<div class="col-sm-2 control-label" id="username_tips" style="text-align:left;color:#D16E6C;" hidden="true" >字符长度必须超过2!</div>
					</div>

					<div class="form-group">
						<label class="col-sm-2 control-label"
							for="form-input-readonly"> 密码:</label>

						<div class="col-sm-5"> 
						
							<span class="input-icon input-icon-right" style="width:100%;">
								<input type="text" class="input-mask-password" value="" readonly="true"  name="password"  style="width:100%;background-color:#F5F5F5">
								<!-- <i class="ace-icon fa fa-key"></i> -->
							</span>
							
						</div>
						
						<div class="col-sm-1 control-label" style="text-align:left;" >
							<input type="checkbox" id="id-disable-check" onclick="editPassword(this)"/> &nbsp;修改!
						</div>
						
						<div class="col-sm-2 control-label" id="password_tips" style="text-align:left;color:#D16E6C;" hidden="true" >密码长度必须超过6!</div>
										
					</div>

					<div class="form-group">
						<label class="col-sm-2 control-label">邮箱:</label>

						<div class="col-sm-5">
							<span class="input-icon input-icon-right" style="width:100%;">
								<input class="input-mask-email" type="text" id="form-field-icon-2" style="width:100%;" name="email" value="${user.email}" required> 
								<!-- <i class="ace-icon fa fa-envelope"></i> -->
							</span>
						</div>
						
						<div class="col-sm-2 control-label" id="email_tips" style="text-align:left;color:#D16E6C;" hidden="true" >请填写正确的邮箱格式!</div>

					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">联系电话:</label>

						<div class="col-sm-5">
							<span class="input-icon input-icon-right" style="width:100%;">
								<input class="input-mask-phone" type="text" name="phone" style="width:100%;" value="${user.phone}" required />
								<!-- <i class="ace-icon fa fa-phone"></i> -->
							</span>
						</div>
						
						<div class="col-sm-2 control-label" id="phone_tips" style="text-align:left;color:#D16E6C;" hidden="true">请填写正确的电话号码!</div>

					</div>

					<div class="form-group">
						<label class="col-sm-2 control-label"> 关联角色: </label>

						<div class="col-sm-5">
							<table class="table table-bordered" id="roleTable">
								<c:forEach items="${rolesUserHave}" var="role">
									<tr id="tr_${role.roleId}">
										<td style="border-right:0px;"><strong>${role.roleName}</strong> (${role.des})</td>
										<td align="right" style="border-left:0px;"><span
											class="ace-icon fa fa-times red" aria-hidden="true" 
											onclick="removeRole('${role.roleId}', '${role.roleName}', '${role.des}')"></span></td>
									</tr>
								</c:forEach>
							</table>
						</div>
					</div>

					<div class="form-group">
						<label class="col-sm-2 control-label"></label>
						<div class="col-sm-5">
							<select class="form-control" id="roleSelect">
								<option value="-1">请选择...</option>
								<c:forEach items="${allRoles}" var="role">
									<option id="op_${role.roleId}" name="${role.des}">${role.roleName}</option>
								</c:forEach>
							</select>
						</div>

						<div class="col-sm-2">
							<button type="button" class="btn btn-info btn-sm" onclick="addRoleToList()">添加</button>
						</div>
					</div>

					<div class="form-group">
						<label class="col-sm-2 control-label"> 启用状态: </label>
						<div class="col-sm-5 checkbox" style="margin-left:15px;">
							<input name="enabled" type="checkbox"
								<c:if test="${user.enabled}"> checked </c:if>>
						</div>
					</div>
					
					<div class="form-group">
	                    <label class="col-sm-2 control-label">
	                        备注:
	                    </label>
	                    <div class="col-sm-5">
	                        <textarea id="remark" class="autosize-transition form-control" style="overflow: hidden; word-wrap: break-word; resize: vertical;">${user.remark}</textarea>
	                    </div>
	                </div>

					<div class="form-group">
						<label class="col-sm-2 control-label"></label>

						<div class="col-sm-2">
							<button type="button" class="btn btn-success" onclick="submitUserData()">提交</button>
							<a type="button" class="btn btn-primary"
								href="${pageContext.request.contextPath}/user/list/1"> 返回列表
							</a>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div style="position: fixed; bottom: 0px; width: 100%;" align="center">
			<%@ include file="../include/footer.jsp"%>
		</div>
	</div>


<script type="text/javascript"> 
	$('.input-mask-username').inputmask('a{2,}', {
		onincomplete : function() {
			$('#username_tips').prop("hidden", false);
		},
		oncomplete : function() {
			$('#username_tips').prop("hidden", true);
		},
		clearMaskOnLostFocus: false,
		insertMode: true
	});
	$('.input-mask-phone').inputmask('99999999999', {
		onincomplete : function() {
			$('#phone_tips').prop("hidden", false);
		},
		oncomplete : function() {
			$('#phone_tips').prop("hidden", true);
		},
		clearMaskOnLostFocus: false,
		insertMode: true
	});
	$('.input-mask-email').inputmask("email", {
		onincomplete : function() {
			$('#email_tips').prop("hidden", false);
		},
		oncomplete : function() {
			$('#email_tips').prop("hidden", true);
		},
		clearMaskOnLostFocus: false,
		insertMode: true
	});
</script>

	<script type="text/javascript">
		$(document)
				.ready(
						function() {
							
							window.editPassword = function(checkbox){
								if($(checkbox).prop("checked")){ 
									$("input[name='password']").prop("readonly", false);
									$("input[name='password']").css("background-color", "");
									$('.input-mask-password').inputmask('a{6,}', {
										onincomplete : function() {
											$('#password_tips').prop("hidden", false);
										},
										oncomplete : function() {
											$('#password_tips').prop("hidden", true);
										},
										clearMaskOnLostFocus: false,
										insertMode: true
									});
								} else {
									$('.input-mask-password').inputmask("remove");
									$("input[name='password']").prop("readonly", true);
									$("input[name='password']").css("background-color", "#F5F5F5");
									$('#password_tips').prop("hidden", true);
								}
							}
							
							window.removeRole = function (roleId, roleName, roleDes){
								$("#tr_" + roleId).remove();
								$("#roleSelect").append("<option id='op_" + roleId + "' name='" + roleDes + "'>" + roleName + "</option>");
								
								if($("tr[id^='tr_']").length == 0){
									$("#roleTable").append("<tr id='info_no_role' border='0'><td border='0'><span style='color:#C0C0C0;'>暂未关联任何角色，请选择角色并添加。</span></td></tr>");
								}
							}
							
							window.addRoleToList = function(){
								var roleName = $(":selected").val();
								var op_roleId = $(":selected").attr("id");
								var roleDes = $(":selected").attr("name");
								
								if("-1" == $(":selected").val()){
									scroll(0, 0);
									$("#tips").remove();
									$("#saveStatus").fadeIn();
									$("#saveStatus")
											.append(
													"<div class='alert alert-danger' role='alert' id='tips'>请选择要添加的角色！</div>");
									$("#saveStatus").fadeOut(5000);
									return;
								} else {
									var roleId = op_roleId.replace("op_", "");
									$(":selected").remove();
								}
								
								if($("tr[id^='tr_']").length == 0){
									$("#info_no_role").remove();
								}
								
								$("#roleTable").append('<tr id="tr_' + roleId + '">' + 
													       '<td  style="border-right:0px;"><strong>' + roleName + '</strong> (' + roleDes + ')</td>' +
														   '<td align="right"  style="border-left:0px;">' +
													           "<span class=\"ace-icon fa fa-times red\" aria-hidden=\"true\" onclick=\"removeRole('" + roleId + "', '" + roleName + "', '" + roleDes + "')\"></span>" + 
													       '</td>' + 
													   '</tr>');
							}
							
							function removeRoleExist(){
								$.each($("tr[id^='tr_']"), function(index, value){
									var roleId = $(value).attr("id").replace("tr_", "");
									$("#op_" + roleId).remove();
								});
							}
							
							function setTableStatus(){
								if($("tr[id^='tr_']").length == 0){
									$("#roleTable").append("<tr id='info_no_role'><td><span style='color:#C0C0C0;'>暂未关联任何角色，请选择角色并点击添加。</span></td></tr>");
								}
							}
							
							removeRoleExist();
							setTableStatus();
							
							window.check = function() {
								if (!$('.input-mask-username').inputmask("isComplete")){
									$('#username_tips').prop("hidden", false);
									return false;
								}
								
								if (!$('.input-mask-password').inputmask("isComplete")){
									$('#password_tips').prop("hidden", false);
									return false;
								}
								
								if(!$('.input-mask-email').inputmask("isComplete")){
									$('#email_tips').prop("hidden", false);
									return false;
								}
								if (!$('.input-mask-phone').inputmask("isComplete")){
									$('#phone_tips').prop("hidden", false);
									return false;
								}
								
								return true;
							}
							
							window.getRoles = function(){
								var selectedRoles = "";
								$.each($("tr[id^='tr_']"), function(index, value){
									selectedRoles += $(value).attr("id").replace("tr_", "") + ",";
								});
								
								return selectedRoles;
							}
							
							window.submitUserData = function(){
								
								if(!check()){
									return false;
								}
								
								$.ajax({
									type : 'post',
									url : '/user/edit',
									data : {
										"id" : $("input[name='id']").val(),
										"username": $("input[name='username']").val(),
										"password" : $("input[name='password']").val(),
										"email" : $("input[name='email']").val(),
										"phone" : $("input[name='phone']").val(),
										"enabled" : $(":checkbox[name='enabled']").prop("checked"),
										"remark": $("#remark").val(),
										"rolesAssignToUser" : window.getRoles()
									},
									cache : false,
									dataType : 'json',
									success : function(data) {
										if(data == 'success'){
											operationSuccess();
										} else {
											operationFailedWithMessage(data);
										}
										
									},
									error : function() {
										operationFailed();
									}
								});
							}

						});
	</script>

	<%@ include file="../include/bottom.jsp"%>